<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="http://s.kaixin001.com.cn/css/kxcommon-024090dd3.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			.panel-mask {background:#000;filter:alpha(opacity:20);-ms-filter:alpha(opacity:20);opacity:0.2;}
			/*panel*/
			.panel {z-index:299;position:absolute;text-align:left;top:0;left:0;}
			.panel .hd {zoom:1;width:auto;}
			.panel .co1,.panel .co2,.panel .cue,.panel .sd,.panel .close,.panel .resize {z-index:3;}
			.panel .close {cursor:pointer;}
			.panel .resize {position:absolute;right:0;bottom:0;width:10px;height:10px;}
			.panel .panel-iframe {width:100%;height:100%;_height:3000px;position:absolute;top:0;left:0;z-index:0;filter:alpha(opacity=0);-ms-filter:alpha(opacity=0);}
			.panel .sd {background:none;padding:0;}


			/*panel-t1*/			
			.panel-t1{position:absolute;zoom:1;z-index:0;_overflow:hidden;}
			.panel-t1 .panel-content{position:relative;z-index:2;padding:8px 7px 0 7px;_position:relative;}
			.panel-t1 .panel-content .hd{height:25px; border:1px solid #565656;border-bottom:none; background:#D01E3B;}
			.panel-t1 .panel-content .hd h3{font-size:13px;color:#fff;font-weight:bold;padding:3px 8px;}
			.panel-t1 .panel-content .bd{padding:0;background-color:#fff;border:1px solid #565656}
			.panel-t1 .sd{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.4;filter:alpha(opacity=40);z-index:-1}
			.panel-t1 .sd .sdconner{display:block; height:8px; overflow:hidden; padding-left:8px; background:url(http://img1.kaixin008.com.cn/i/panel_conner.png) no-repeat 0 0;}
			.panel-t1 .sd .sdconner_b{background-position:0 -16px;}
			.panel-t1 .sd .sdconner div{ height:8px; overflow:hidden; background:url(http://img1.kaixin008.com.cn/i/panel_conner.png) no-repeat right -8px;}
			.panel-t1 .sd .sdconner_b div{background-position:right -24px;}
			.panel-t1 .sd div.rect{position:relative;height: 100%;border-left:7px solid #000;border-right:7px solid #000;}
			.panel-t1 .close{color:#F6D2D8;font-weight:bold;position:absolute;top:10px;right:15px;}
		</style>
		
		<script src="http://s.kaixin008.com.cn/js/base/Haibei.js"></script>
        <script src="http://s.kaixin008.com.cn/js/core/jQuery.js"></script>
		<script type="text/javascript" src="http://s.kaixin008.com.cn/js/core/panel/Panel.js"></script>
		<script type="text/javascript" src="http://s.kaixin008.com.cn/js/core/panel/Mask.js"></script>
		<script type="text/javascript" src="http://s.kaixin008.com.cn/js/core/panel/Dialog.js"></script>
		<script type="text/javascript" src="http://s.kaixin008.com.cn/js/core/panel/MessageBox.js"></script>
		<script type="text/javascript" src="http://s.kaixin008.com.cn/js/core/panel/Window.js"></script>
	</head>
	<body>
		<h1>Window测试</h1>
		<style type="text/css">
			.cls{zoom:1;}
			.cls:after{content:'.';display:block;height:0;visibility:hidden;clear:both;}
			.args{background:#eee;padding:10px 0 10px 50px;border-bottom:1px solid #999;margin-top: 20px;}
			.args li{margin: 5px;list-style:none;}
			.args li .k{display:inline-block;width: 100px;text-align:right;padding-right:5px;}
		</style>
		<div class="args">
			<h3>参数</h3>
			<ul>
				<li class="cls">
					<span class="k"><label>Left:</label></span><span class="v"><input id="leftVal" value="0"></span>
				</li>
				<li class="cls">
					<span class="k"><label>Top:</label></span><span class="v"><input id="topVal" value="0"></span>
				</li>
				<li class="cls">
					<span class="k"><label>Height:</label></span><span class="v"><input id="heightVal" value="320"></span>
				</li>
				<li class="cls">
					<span class="k"><label>Width:</label></span><span class="v"><input id="widthVal" value="500"></span>
				</li>
				<li class="cls">
					<span class="k"><label>是否居中:</label></span>
					<span class="v">
						<select id="atCenterVal"><option value="1">是</option><option value="0">否</option></select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label>是否使用iframe:</label></span>
					<span class="v">
						<select id="useIframeVal"><option value="2">自动</option><option value="1">是</option><option value="0">否</option></select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label>是否使用mask:</label></span>
					<span class="v">
						<select id="useMaskVal"><option value="1">是</option><option value="0">否</option></select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label>标题:</label></span><span class="v"><input id="titleVal" value="动态屏蔽设置"></span>
				</li>
				<li class="cls">
					<span class="k"><label>URL:</label></span><span class="v"><input id="urlVal" value="http://www.baidu.com"></span>
				</li>
				</li>
				<li class="cls">
					<span class="k"><label>样式:</label></span>
					<span class="v">
						<select id="classNameVal"><option value="panel-t1">panel-t1</option></select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label></label></span>
					<span class="v">
						<button id="showDialog">Show</button>&nbsp;&nbsp;
						<button id="hideDialog">Hide</button>&nbsp;&nbsp;
						<button id="staticOpen">Window.open方法</button>
						<button id="delayDialog">MouseOver Delay Show</button>&nbsp;&nbsp;
					</span>
				</li>
			</ul>
		</div>	
		内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
		内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
		
	</body>
	<script type="text/javascript">
	/*<![CDATA[*/
		K.App('AWindowTest',['core/panel/Window','jQuery']).define({
			main: function(){
				var $ = this.require( 'jQuery' );
				
				function getOpts(){
					var optArr = 'top,left,height,width,atCenter,useIframe,useMask,title,url,className'.split(','),
						opts = {};
					K.forEach(optArr, function(opt){
						var val = $('#' + opt + 'Val').val();
						if( opt == 'top' || opt == 'left' || opt == 'height' || opt == 'width' ){
							val = parseInt( val );
						}
						if( opt == 'atCenter' || opt == 'useMask' ){
							val = !!parseInt( val );
							opts[ opt ] = val;
						}
						else if( opt == 'useIframe' ){
							val = parseInt( val );
							if( val != 2 ){
								val = !!val;
								opts[ opt ] = val;
							}
						}
						else{
							opts[ opt ] = val;
						}
					});
					return opts;
				}				

				var kWindow = this.require('core/panel/Window');
				
				var win;
				$('#showDialog').click(function(){ 
					var opts = getOpts();
					win = new kWindow( opts );
					win.show();
				});
				$('#hideDialog').click(function(){ win.hide();});
				$('#staticOpen').click(function(){
					win = kWindow.open( $('#urlVal').val(), 800,500, '静态方法打开的窗口');
				});
				$('#delayDialog').mouseenter(function(){
					var opts = getOpts();
					win = new kWindow( opts );
					win.delayShow({});
				}).mouseleave(function(){
					win.hide();
				});
			}
		});
	//]]>
	</script>
</html>
